<template>
  <!-- loadMore -->
  <div  class="bottom_loading_box">
    <div  class="box_right" v-if="status == 'loading'">
      <div v-if="mode == 'loading1'" class="loading_1" :style="{'border-color': color,}">
        <div class="ball_holder">
          <div class="ball" :style="{ 'background-color': color }"></div>
        </div>
      </div>
      <div v-if="mode == 'loading2'" class="loading_2">
        <div class="line li1" :style="{ 'background-color': color }"></div>
        <div class="line li2" :style="{ 'background-color': color }"></div>
        <div class="line li3" :style="{ 'background-color': color }"></div>
      </div>
      <div v-if="mode == 'loading3'" class="loading_3" :style="{ 'border-top-color': color }"></div>
      <div v-if="mode == 'loading4'" class="loading_4" :class="{ left: !showTitle }"></div>
    </div>
    <div  class="box_left" :style="{ color: color }" :class="{ left: mode == 'loading4' }" v-if="showTitle">{{
      status == "down" ? loadTitle.down : status == "loading" ? loadTitle.loading : loadTitle.normal
    }}</div>
  </div>
</template>

<script>
export default {
  props: {
    /* loading 样式 */
    mode: {
      type: String,
      default: "loading1",
    },
    /* 状态 */
    status: {
      type: String,
      default: "loading",
    },
    /* 显示文本 */
    showTitle: {
      type: Boolean,
      default: true,
    },
    /* 加载中文本 */
    loadTitle: {
      type: Object,
      default(){
		  return {
			    down: "上拉显示更多",
			    loading: "正在加载中...",
			    normal: "---- 已经到底了 ----",
		  }
	  }
    },
    /* 颜色 loading 1 2 有效 */
    color: {
      type: String,
      default: "#FFF",
    },
    /* padding */
  },
};
</script>

<style lang="stylus" scoped>
@-webkit-keyframes spWaveAf
  from
    transform scale(0.5, 0.5)
    opacity 0
  to
    transform scale(1, 1)
    opacity 1

@-webkit-keyframes spWaveBe
  from
    -webkit-transform scale(1, 1)
    opacity 1
  to
    -webkit-transform scale(1.5, 1.5)
    opacity 0

@-webkit-keyframes loading1
  0%
    transform rotate(0deg)
  100%
    transform rotate(360deg)
@-webkit-keyframes spin
  0%
    transform rotate(0deg)
  100%
    transform rotate(360deg)

@-webkit-keyframes loading2
  0%
    transform translate(0, 0)
  50%
    transform translate(0, -3rpx)
  100%
    transform translate(0, 0)

.bottom_loading_box
  width 100%
  // padding 20rpx 0
  font-size 24rpx
  display flex
  align-items center
  justify-content center
  .box_left
    padding 0 6rpx
    &.left
      position relative
      left 8rpx

  .box_right
    .loading_1
      position: relative
      width 16rpx
      height 16rpx
      margin 0 auto
      border 2rpx solid #666666
      border-radius 100%
      .ball_holder
        position absolute
        width 12rpx
        height 100%
        left 0
        right 0
        top 0
        bottom 0
        margin auto
        animation loading1 1.3s linear infinite
        .ball
          position: absolute
          left 0
          top 1rpx
          width 5rpx
          height 5rpx
          border-radius 100%
          background #666666

    .loading_2
      display flex
      align-items center
      .line
        display inline-block
        margin 0 2rpx
        width 8rpx
        height 8rpx
        border-radius 15rpx
        background-color #666666
        &.li1
          animation loading2 0.6s 0.1s linear infinite

        &.li2
          animation loading2 0.6s 0.2s linear infinite

        &.li3
          animation loading2 0.6s 0.3s linear infinite

    .loading_3
      border-radius 50%
      width 16rpx
      height 16rpx
      border 0.25rem solid rgba(255, 255, 255, 0.2)
      border-top-color #ffffff
      animation spin 1s infinite linear

    // color
    .loading_4
      border-radius 50%
      position relative
      opacity 1

      &:before,
      &:after
        content ""
        border 8rpx #ffffff solid
        border-radius 50%
        width 100%
        height 100%
        position absolute
        top -8rpx
        left -8rpx


      &:before
        transform scale(1, 1)
        opacity 1
        animation spWaveBe 0.6s infinite linear


      &:after
        transform scale(0, 0)
        opacity 0
        animation spWaveAf 0.6s infinite linear

</style>
